<template>
    <div>
        <div class="com_box">
            <div class="sch_rank">
                <div class="flexbox flexcenter flexbetween">
                    <div class="flexbox flexcenter">
                        <span class="font_14 color_01">筛选</span>
                        <div class="rank_line" style="margin-left:12px"></div>
                        <div class="reset_btn" @click="resetFun">重置</div>
                        <div class="rank_line"></div>
                        <img src="../../assets/img/down_icon.svg" alt="" class="rank_down" :class="{'rank_up':!showrank}" @click="showrank = !showrank">
                    </div>
                </div>
            </div>
            <div class="sch_hight flexbox" v-if="showrank">
                <div class="flexbox flexcenter flex">
                    <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                        <div class="flexbox flexcenter drop_box drop_hover">
                            <span class="drop_text">文件状态</span>
                            <span class="drop_title">{{pullStatusText.length>0?pullStatusText.toString():'全部'}}</span>
                            <span class="el-icon-caret-bottom"></span>
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <div class="dropdown_hascheck flexbox flexcenter">
                                <span class="hascheck_num" :class="{'hascheck_num_color':pullStatusText.length>0}">已选 {{pullStatusText.length}} 项</span>
                                <div class="rank_line" style="margin:0 10px"></div>
                                <el-link type="primary" :underline="false" @click="clearFilterRadio('pullStatusText','status')" v-if="pullStatusText.length>0">清除已选</el-link>
                            </div>
                            <el-radio-group v-model="queryInfo.status" class="check_style" @change="changeRadio(pullStatus,queryInfo.status,'pullStatusText','nickname')">
                                <el-radio :label="item.id" v-for="(item,index) in pullStatus" :key="index">
                                    <span class="el_check_title">{{item.nickname}}</span>
                                    <span class="el-icon-check el_check_icon"></span>
                                </el-radio>
                            </el-radio-group>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <div class="rank_line"></div>
                    <span class="color_02 font_14" style="margin:0px 10px">任务生成时间</span>
                    <el-date-picker style="width:260px;margin-left:5px" value-format="yyyy-MM-dd" v-model="queryInfo.date" type="daterange" clearable size="small" @change="getDataList(1)" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                </div>
            </div>
        </div>

        <div class="w_bg bd" style="margin-top:12px" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
            <div class="strategy_head flexbox flexcenter flexbetween">
                <div class="has_check flexbox flexcenter flexbetween" v-if="hasCheck.length>0">
                    <div class="has_ch_left">
                        <span class="has_text">已选中{{hasCheck.length}}项</span>
                        <span class="has_btn" @click="batchDeletTask">删除</span>
                    </div>
                    <div class="close_check" @click="closeCheck">
                        <img src="../../assets/img/close_check.svg" alt="">
                    </div>
                </div>
                <div class="font_16 color_01" v-else>
                    任务列表
                </div>
            </div>
            <div class="table_box">
                <el-table :data="tableData" class="com_table" ref="straRef" max-height="700px" :row-key="(row)=>{ return row.id}" @selection-change="selectStrategy">
                    <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:300px">
                        <img src="../../assets/img/null_icon.svg" alt="">
                        <div class="font_13 color_03">暂无数据</div>
                    </div>
                    <el-table-column type="selection" width="55" align="center" :reserve-selection="true"></el-table-column>
                    <el-table-column prop="create_date" label="任务生成时间" width="180">
                    </el-table-column>
                    <el-table-column prop="name" label="文件名称" min-width="150">
                    </el-table-column>
                    <el-table-column prop="status" label="文件状态" width="150">
                        <template slot-scope="scope">
                            <div class="flexbox flexcenter">
                                <template v-if="scope.row.status==3">
                                    <span class="circle_text circle_green" style="margin-right:10px"></span>已完成
                                </template>
                                <template v-else-if="scope.row.status==1">
                                    <span class="circle_text circle_yellow" style="margin-right:10px"></span>未开始
                                </template>
                                <template v-else-if="scope.row.status==2">
                                    <span class="circle_text circle_blue" style="margin-right:10px"></span>执行中
                                </template>
                                <template v-else-if="scope.row.status==4">
                                    <span class="circle_text circle_red" style="margin-right:10px"></span>失败
                                </template>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="160">
                        <template slot-scope="scope">
                            <el-link type="primary" :href="'https://morphlingv4.jcmasz.com/'+scope.row.path" target="_blank" :underline="false" :disabled="scope.row.status !=3">保存到本地</el-link>
                            <el-link type="danger" :underline="false" style="margin-left:12px" @click="deletTask(scope.row.id)">删除</el-link>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="page_box flexbox flexcenter" v-if="total>0">
                <el-pagination background layout="total, prev, pager, next,sizes" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-size="queryInfo.limit" :page-sizes="[20, 50, 100, 200]" :total="total">
                </el-pagination>
            </div>
        </div>

    </div>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            hasCheck:[],
            showrank: true,
            loading: false,
            pullStatus: [
                {
                    id: 1,
                    nickname: "未开始",
                },
                {
                    id: 2,
                    nickname: "执行中",
                },
                {
                    id: 3,
                    nickname: "已完成",
                },
                {
                    id: 4,
                    nickname: "失败",
                },
            ],
            pullStatusText: [],
            queryInfo: {
                page: 1,
                limit: 20,
                name: "",
                status:'',
                date: [],
            },
            total: 1,
            setpage: 1,
            tableData: [],
        };
    },
    created() {
        this.getDataList(1);
    },
    methods: {
        //获取列表
        async getDataList(page) {
            this.queryInfo.page = page;
            this.loading = true;
            const { data: res } = await this.$http.post(
                "export/DownloadTtask/task_list",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.tableData = res.data.list;
                this.total = res.data.count;
            }
        },

        // 单选筛选
        changeRadio(list, id, text, name) {
            let has_checked = [];
            list.forEach((element) => {
                if (element.id == id) {
                    has_checked = [element[name]];
                }
            });
            this[text] = has_checked;
            this.getDataList(1);
        },

        // 删除模板
        deletTask(id) {
            this.$confirm("是否要删除该数据?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(async () => {
                    const { data: res } = await this.$http.post(
                        "export/DownloadTtask/task_del",
                        {
                            id: id,
                        }
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        return;
                    } else {
                        this.getDataList(this.setpage);
                        this.$message({
                            type: "success",
                            message: "删除成功!",
                        });
                    }
                })
                .catch(() => {});
        },

        // 批量删除模板
        batchDeletTask() {
            this.$confirm("是否要删除已选中数据?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(async () => {
                    const { data: res } = await this.$http.post(
                        "export/DownloadTtask/batch_del",
                        {
                            id: this.hasCheck,
                        }
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        return;
                    } else {
                        this.getDataList(this.setpage);
                        this.$message({
                            type: "success",
                            message: "删除成功!",
                        });
                        this.closeCheck();
                    }
                })
                .catch(() => {});
        },

        // 批量选择
        selectStrategy(val) {
            var ids = [];
            val.forEach((element) => {
                ids.push(element.id);
            });
            this.hasCheck = ids;
        },

        // 关闭批量选择
        closeCheck() {
            this.e = [];
            this.$refs.straRef.clearSelection();
        },

        // 清除单选
        clearFilterRadio(text, id) {
            this.queryInfo[id] = "";
            this[text] = [];
            this.getDataList(1);
        },

        // 重置
        resetFun() {
            this.queryInfo.name = "";
            this.queryInfo.status = "";
            this.queryInfo.date = [];
            this.pullStatusText = [];
            this.getDataList(1);
        },

        // 每页显示多少条数据
        handleSizeChange(val) {
            this.queryInfo.limit = val;
            this.getDataList(1);
        },
        // 当前页切换
        handleCurrentChange(val) {
            this.setpage = val;
            this.getDataList(val);
        },
    },
    components: {},
};
</script>


<style scoped>
.reset_btn {
    margin: 0 12px;
}
.table_box {
    padding: 0 20px;
}
</style>


